import {
  computed,
  defineAsyncComponent,
  defineComponent,
  onMounted,
  ref,
  toRef,
  toRefs,
  unref,
} from '@vue/runtime-core';
import { Modal, Button } from 'ant-design-vue';
import { prayerComponentMap, PreyersType } from '../prayers/components/prayers';

export default defineComponent({
  props: {
    compname: {
      type: String,
      default: 'father',
    },
    comptitle: {
      type: String,
      default: '天主经',
    },
  },
  emits: ['register'],
  setup(props, { emit }) {
    const visible = ref<boolean>(false);
    const propsRef = ref<{ compname?: string }>({});
    let comp = null;

    const getProps = computed(() => {
      return { ...props, ...unref(propsRef) };
    });
    // const importData = computed(() => {
    //   return `../prayers/components/${unref(getProps).compname}.vue`;
    // });
    function setComp() {
      // comp = defineAsyncComponent(() => import(unref(importData)));
      comp = prayerComponentMap.get(
        unref(getProps).compname as PreyersType
      ) as typeof defineComponent;
    }

    function setProps(obj: { compname: string; comptitle: string }) {
      propsRef.value = obj;
      setComp();
    }
    function show() {
      visible.value = true;
    }
    function hide() {
      visible.value = false;
    }
    function getContent() {
      return (
        <>
          <comp />
        </>
      );
    }

    const slots = {
      footer: () => (
        <>
          <Button onClick={hide}>关闭</Button>
        </>
      ),
    };
    onMounted(() => {
      emit('register', { setProps, show });
    });
    return () => (
      <>
        <Modal
          cancel-text="关闭"
          v-model={[visible.value, 'visible']}
          title={unref(getProps).comptitle}
          v-slots={slots}
        >
          {getContent()}
        </Modal>
      </>
    );
  },
});
